<template>
	<view v-if="pageShow" class="container">
		<scroll-view class="scroll" :scroll-y="true">
			<view class="swiper-area">
				<swiper class="swiper" :autoplay="true" :interval="3000" :duration="1000" :circular="true"
					@change="onSwiperChange">
					<swiper-item v-for="(item, index) in banners" :key="index" class="swiper-item" @click="viewImg(item)">
						<image class="swiper-img" :src="item" mode="aspectFill">
						</image>
					</swiper-item>
				</swiper>
			</view>
			<view class="header">
				<view class="header-title">
					<text class="title">{{ shopInfo.name }}</text>
					<text class="price">{{ shopInfo.price == 0 ? '面议' : '¥' + shopInfo.price }}</text>
				</view>
				<view class="header-collect" @click="collectShop">
					<image
						:src="isCollect === 0 ? 'https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/enterprise-service/shopImg/collect_icon.png' : 'https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/enterprise-service/shopImg/collect_select.png'">
					</image>
					<text>收藏</text>
				</view>
			</view>
			<view class="service-info">
				<view class="service" @click="goServiceDetail">
					<view class="logo">
						<image :src="serviceInfo.logo" mode="aspectFill"></image>
					</view>
					<view class="describe">
						<text class="title">{{ serviceInfo.name }}</text>
						<text class="goods">擅长服务：{{ goodService }}</text>
					</view>
				</view>
			</view>
			<view class="service-detail">
				<view v-if="shopInfo.service_time || shopInfo.preparation || shopInfo.service_process || shopInfo.service_content"
					class="title solid-bottom">
					服务详情
				</view>
				<view class="service-content">
					<view v-if="shopInfo.service_time" class="content">
						<view class="icon"></view>
						<view class="content-item">
							<text class="content-title">服务时间</text>
							<text class="detail">{{ shopInfo.service_time }}</text>
						</view>
					</view>
					<view v-if="shopInfo.preparation" class="content">
						<view class="icon"></view>
						<view class="content-item">
							<text class="content-title">准备资料</text>
							<text class="detail">{{ shopInfo.preparation }}</text>
						</view>
					</view>
					<view v-if="shopInfo.service_process" class="content">
						<view class="icon"></view>
						<view class="content-item">
							<text class="content-title">服务流程</text>
							<text class="detail">{{ shopInfo.service_process }}</text>
						</view>
					</view>
					<view v-if="shopInfo.service_content" class="content">
						<view class="icon"></view>
						<view class="content-item">
							<text class="content-title">服务内容</text>
							<text class="detail">{{ shopInfo.service_content }}</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="bottom-btn">
			<view class="btn-ask" @click.stop="nowAsk">
				立即咨询
			</view>
			<view class="btn-buy" @click.stop="nowBuy">
				立即购买
			</view>
		</view>
	</view>
</template>

<script>
import info from "@/static/js/enterpriseServer/info.js"
export default {
	data() {
		return {
			shopId: '',
			//商品详情
			shopObj: {},
			banners: [],
			shopInfo: {},
			serviceInfo: {},
			swiperIndex: 0,
			isCollect: null,

			//服务商详情
			serviceObj: {},
			goodService: '',

			pageShow: false
		}
	},
	onLoad(e) {
		this.shopId = e.id
		this.getDetail()
	},
	methods: {
		//获取服务商品详情
		async getDetail() {
			let res = await info.getShopDetail({
				id: this.shopId
			})
			if (res.code === 1) {
				this.shopObj = res.data
				this.shopInfo = res.data.info
				this.isCollect = res.data.is_collect
				this.serviceInfo = res.data.service_info
				this.banners = res.data.info.pic.split(',')
				this.getServiceInfo(res.data.service_info.id)
				this.pageShow = true
			} else {
				this.$tools.msg(res.msg)
			}
		},
		//获取服务商详情
		async getServiceInfo(val) {
			let res = await info.getServiceDetail({
				id: val
			})
			if (res.code === 1) {
				this.serviceObj = res.data
				let arr = []
				res.data.good_services.forEach(val => {
					arr.push(val.name)
				})
				this.goodService = arr.join('、')
			} else {
				this.$tools.msg(res.msg)
			}
		},

		//收藏、取消收藏商品
		async collectShop() {
			if (!uni.getStorageSync('token')) {
				this.$common.handleToken()
				return
			}
			let obj = {
				id: this.shopId,
				type: 13
			}
			let res = await info.addCollect(obj)
			if (res.code === 1) {
				if (res.code === 1) {
					this.isCollect = 1 - this.isCollect
					if (this.isCollect === 1) {
						this.$tools.msg('收藏成功')
					} else {
						this.$tools.msg('取消收藏')
					}
				}
			}
		},

		//前往服务商详情
		goServiceDetail() {
			uni.navigateTo({
				url: '/pagesShop/serviceDetail/serviceDetail?id=' + this.serviceInfo.id
			})
		},

		//轮播图事件
		onSwiperChange(e) {
			this.swiperIndex = e.detail.current
		},

		//banner图预览
		viewImg(item) {
			uni.previewImage({
				urls: [item]
			})
		},

		//立即咨询
		nowAsk() {
			if (uni.getStorageSync('token') == false) {
				uni.navigateTo({
					url: '/pages/login/login'
				})
				return
			}
			uni.setStorageSync("to_zim_userid", this.serviceInfo.user_id);
			uni.navigateTo({
				url: '/enterpriseServer/chatRoom/index?id=' + this.serviceInfo.user_id
			})
		},

		//立即购买
		async nowBuy() {
			if (!uni.getStorageSync('token')) {
				uni.navigateTo({
					url: '/pages/login/login'
				})
				return
			}
			this.$tools.msg('敬请期待')
			// let obj = {
			// 	shop_id: this.shopId
			// }
			// const res = await info.buyShop(obj)
			// if (res.code === 1) {
			// 	uni.navigateTo({
			// 		url: '/enterpriseServer/payment/index/index?orderNo=' + res.data
			// 	})
			// } else {
			// 	this.$tools.msg(res.msg)
			// }
		}
	}
}
</script>

<style lang="scss" scoped>
@import "index.scss";
</style>